<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
  <th:block th:include="wx/include :: header('商品详情')" />
</head>
<body ontouchstart>
<!--主体-->
<header class="wy-header">
  <div class="wy-header-icon-back" onclick="javascript:history.go(-1)"><span></span></div>
  <div class="wy-header-title">商品详情</div>
</header>
<div class="weui-content">
  <!--产品详情-->
  <div class="weui-tab">
    <div class="swiper-container swiper-zhutu">
      <div class="swiper-wrapper">
        <div class="swiper-slide" th:each="image : ${goods.imageList}"><img th:src="${image}" /></div>
      </div>
      <div class="swiper-pagination swiper-zhutu-pagination"></div>
    </div>
    <div class="wy-media-box-nomg weui-media-box_text">
      <input type="hidden" id="goodsId" th:value="${goods.goodsId}">
      <h4 class="wy-media-box__title" th:text="${goods.goodsName}"></h4>
      <div class="wy-pro-pri mg-tb-5">
        ¥<em class="num font-20" th:text="${goods.price}"></em>
        &nbsp;&nbsp;<em class="num font-14" style="text-decoration: line-through;color:#999999;" th:text="'原价：¥' + ${goods.originalPrice}"></em>
        <span style="float: right;color:#999999;font-size: 12px;"><em th:text="${goods.volume}"></em>人付款</span>
      </div>
      <p class="weui-media-box__desc" th:text="${goods.description}"></p>
      <div class="promotion-message clear">
        <i class="yhq" th:each="keyword : ${goods.keywordsList}"><span class="label-text" th:text="${keyword}">精品推荐</span></i>
      </div>
    </div>
    <div class="wy-media-box2 txtpd weui-media-box_text">
      <p style="font-size: 14px; padding: 10px;line-height: 30px;" th:text="${goods.remark}"></p>
    </div>
  </div>  
</div>
<span id="tophovertree" title="返回顶部"></span>
<!--底部导航-->
<div class="foot-black"></div>
<div class="weui-tabbar wy-foot-menu">
  <a href="/wx/index" class="promotion-foot-menu-items">
    <div class="weui-tabbar__icon promotion-foot-menu-home"></div>
    <p class="weui-tabbar__label">首页</p>
  </a>
  <a href="javascript:;" id="show-collect" class="promotion-foot-menu-items">
    <div class="weui-tabbar__icon promotion-foot-menu-collection"></div>
    <p class="weui-tabbar__label">收藏</p>
  </a>
  <a href="javascript:;" id="show-no-collect" class="promotion-foot-menu-items">
    <div class="weui-tabbar__icon promotion-foot-menu-collection2"></div>
    <p class="weui-tabbar__label">收藏</p>
  </a>
  <a href="/wx/cart" class="promotion-foot-menu-items">
    <span th:if="${count > 0}" class="weui-badge" style="position: absolute;top: -.4em;right: 1em;" th:text="${count}" id="count">0</span>
    <div class="weui-tabbar__icon promotion-foot-menu-cart"></div>
    <p class="weui-tabbar__label">购物车</p>
  </a>
  <a href="javascript:;" class="weui-tabbar__item yellow-color">
    <p class="promotion-foot-menu-label" onclick="addCart()">加入购物车</p>
  </a>
  <a href="javascript:;" class="weui-tabbar__item red-color open-popup" data-target="#selcet_sku">
    <p class="promotion-foot-menu-label">立即购买</p>
  </a>
</div>
<div id="join_cart" class='weui-popup__container popup-bottom' style="z-index:600;">
  <div class="weui-popup__overlay" style="opacity:1;"></div>
  <div class="weui-popup__modal">
    <div class="modal-content">
      <div class="weui-msg" style="padding-top:0;">
        <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
        <div class="weui-msg__text-area">
          <h2 class="weui-msg__title">成功加入购物车</h2>
          <p class="weui-msg__desc">亲爱的用户，您的商品已成功加入购物车！</p>
        </div>
        <div class="weui-msg__opr-area">
          <p class="weui-btn-area">
            <a href="/wx/cart" class="weui-btn weui-btn_primary">去购物车结算</a>
            <a href="javascript:;" class="weui-btn weui-btn_default close-popup">不，我再看看</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="selcet_sku" class='weui-popup__container popup-bottom' style="z-index:600;">
  <div class="weui-popup__overlay" style="opacity:1;"></div>
  <div class="weui-popup__modal">
    <div class="toolbar">
      <div class="toolbar-inner">
        <a href="javascript:;" class="picker-button close-popup">关闭</a>
        <h1 class="title">我要购买</h1>
      </div>
    </div>
    <div class="modal-content">
      <div class="weui-msg" style="padding-top:0;">

        <div class="weui-msg__opr-area">
          <p class="weui-btn-area">
            <a href="javascript:;" class="weui-btn weui-btn_primary" onclick="buy()">立即购买</a>
            <a href="javascript:;" class="weui-btn weui-btn_default close-popup">不，我再看看</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<th:block th:include="wx/include :: footer" />
<script th:inline="javascript">
    $(function() {
        $(".Spinner").Spinner({
            value: 1,
            len: 3,
            max: 999
        });
        var collectCount = [[${collectCount}]];
        if(collectCount > 0){
          $('#show-no-collect').show();
          $('#show-collect').hide();
        }else{
          $('#show-no-collect').hide();
          $('#show-collect').show();
        }
    });
    $(".swiper-zhutu").swiper({
        loop: true,
        paginationType: 'fraction',
        autoplay: 5000
    });

    function addCart(){

        var goodsId = $('#goodsId').val();
        $.post('/wx/cart/add', { goodsId: goodsId }, function(resp){
            if(resp.code == 0){
                var count = $('#count').html();
                $('#count').html(Number(count)+1);
                $("#join_cart").popup();
                console.log("添加成功！");
            }else{
                $.alert(resp.msg);
            }
        });
    }

    $(document).on("open", ".weui-popup-modal",
        function() {
            console.log("open popup");
        }).on("close", ".weui-popup-modal",
        function() {
            console.log("close popup");
        });

    $(function() {
        initTopHoverTree("tophov" + "ertree", 30, 10, 10);
    })
    function initTopHoverTree(hvtid, times, right, bottom) {
        $("#" + hvtid).css("right", right).css("bottmo", bottom);
        $("#" + hvtid).on("click", function () { goTopHovetree(times); })
        $(window).scroll(function () {
            if ($(window).scrollTop() > 268) {
                $("#" + hvtid).fadeIn(100);
            } else {
                $("#" + hvtid).fadeOut(100);
            }
        });
    }
    //goTop(500);//500ms内滚回顶部
    function goTopHovetree(times) {
        if ( !! !times) {
            $(window).scrollTop(0);
            return;
        }
        var sh = $('body').scrollTop(); //移动总距离
        var inter = 13.333; //ms,每次移动间隔时间
        var forCount = Math.ceil(times / inter); //移动次数
        var stepL = Math.ceil(sh / forCount); //移动步长
        var timeId = null;
        function aniHovertree() { !! timeId && clearTimeout(timeId);
            timeId = null;
            //console.log($('body').scrollTop());
            if ($('body').scrollTop() <= 0 || forCount <= 0) { //移动端判断次数好些，因为移动端的scroll事件触发不频繁，有可能检测不到有<=0的情况
                $('body').scrollTop(0);
                return;
            }
            forCount--;
            sh -= stepL;
            $('body').scrollTop(sh);
            timeId = setTimeout(function() {
                    aniHovertree();
                },
                inter);
        }
        aniHovertree();
    }

    function buy(){
        var goodsId = $('#goodsId').val();
        $.post('/wx/order/add', { goodsId: goodsId }, function(resp){
            if(resp.code === 0){
                window.location.href = '/wx/order_info/' + resp.data;
            }else{
                $.alert(resp.msg);
            }
        });
    }


    $(document).on("click", "#show-collect", function() {
        var goodsId = $('#goodsId').val();
        $.post('/wx/collection/add', { goodsId: goodsId }, function(resp){
            if(resp.code === 0){
                $('#show-no-collect').show();
                $('#show-collect').hide();
                $.toast("收藏成功", function() {});
            }else{
                layer.alert(resp.msg);
            }
        });
    });

    $(document).on("click", "#show-no-collect", function() {
        var goodsId = $('#goodsId').val();
        $.post('/wx/collection/del/' + goodsId, {}, function(resp){
            if(resp.code == 0){
              $('#show-no-collect').hide();
              $('#show-collect').show();
                $.toast("取消收藏", function() {});
            }else{
                layer.alert(resp.msg);
            }
        });
    });

</script>
</body>
</html>
